<template>
  <v-form ref="formComponent" v-model="valid" :lazy-validation="options.lazyValidation" :class="options.class">
    <v-row no-gutters>
      <template v-for="item in items">
        <v-col
          v-if="dynamicShow(item)"
          :key="item.id"
          class="formLayoutLR"
          cols="12"
          xs="12"
          sm="4"
          md="4"
          :lg="dynamic_LG_Span(item)"
          xl="2"
        >
          <!-- xs="12"
          sm="4"
          :md="item.span"
          lg="3"
          xl="2" -->
          <!-- <v-text-field class="L_R_formLabel" disabled text solo flat :value="item.label" /> -->
          <!-- <div ref="formLabel" class="L_R_formLabel" :style="{ width: dynamicLabelWidth(item), color: 'red' }"> -->
          <div ref="formLabel" class="L_R_formLabel" :style="{ width: item.formWidth + 'px', color: 'red' }">
            {{ item.label }}
          </div>
          <form-content
            v-model="form[item.prop]"
            class="pa-1 L_R_formContent commonFormItemStyle"
            :class="options.formLayout === 'l&r' ? 'UnshowDefaultLabel' : 'insideFormItemStyle'"
            :config-item="item"
            @input="$emit('input', form[item.prop])"
          >
          </form-content>
        </v-col>
      </template>
    </v-row>
    <form-operation
      v-if="options.operationShow"
      :form-operation="options.formOperation"
      @formCancel="formCancel"
      @formSave="formSave"
      @buttonListMethodCB="buttonListMethodCB"
    >
    </form-operation>
  </v-form>
</template>

<script>
import { setItemShow } from '@/utils/formCommonUtils'
import FormContent from './FormContent.vue'
import FormOperation from './FormOperation.vue'
import { isEmptyValue } from '@/utils/tools'
import { descArray } from '@/utils/arraySort'

export default {
  // 表单主要组件
  name: 'FormComponent',

  // 引用组件
  components: {
    FormContent,
    FormOperation
  },

  // 父组件传递的props
  props: {
    // 显示表单
    // formShow: { type: Boolean, default: null },
    formShow: { type: Boolean, default: true },
    // 表单数据
    formConfig: { type: Object, default: () => ({}) },
    // 表单数据
    formData: { type: Object, default: () => ({}) },
    // 表单配置
    formOptions: { type: Object, default: () => ({}) },
    // 搜索项配置
    formItem: { type: Array, default: () => [] }
  },

  data() {
    return {
      // 显示重定向
      show: this.formShow,
      // 表格有效值
      valid: true,
      // 表单配置重定向
      options: this.formOptions,
      // 搜索项重定位
      items: this.formItem,
      // 表单
      form: this.formData
    }
  },

  computed: {},

  watch: {},

  beforeCreate() {
    //
  },

  created() {
    setItemShow(this.show, this.items, 'formShow', true)
    setItemShow(this.show, this.items, 'formWidth', undefined)
    // setItemShow(this.show, this.items, 'backgroundColor', '#9E9E9E')
    // setItemShow(true, this.items, 'disabled', true)
  },

  mounted() {
    this.set_LR_LabelWidth()
    //
  },

  methods: {
    // 动态显隐
    dynamicShow(item) {
      console.log(item.formShow)
      return isEmptyValue(item.formShow) ? false : item.formShow
    },

    dynamic_LG_Span(item) {
      console.log(item.span)
      // console.log('LG', item.span, item.label, item.type, item.formShow)
      return 3
    },

    dynamicLabelWidth(item) {
      const width = item.formWidth
      console.log(width)
      return item.formWidth + 'px'
    },

    set_LR_LabelWidth() {
      const labelList = this.$refs.formLabel
      console.log(labelList)
      let widthList = labelList.map(node => node.clientWidth)
      widthList = descArray(widthList)
      this.items.forEach(item => item.type && this.$set(item, 'formWidth', widthList[0]))
    },

    // 取消操作
    formCancel(el) {
      this.$emit('formCancel', el)
    },
    // 保存操作
    formSave(el) {
      this.$emit('formSave', el)
    },

    buttonListMethodCB(methodName, el) {
      // console.log(methodName, el)
      this.$emit('formBtnCB', methodName, el)
    }
  }
}
</script>

<style lang="scss" scoped>
// 表单左右布局时样式
.formLayoutLR {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 左右布局Label样式
.L_R_formLabel {
  display: flex;
  justify-content: flex-end;
  height: 40px;
}
// 左右布局FormContnet铺满
.L_R_formContent {
  flex: 1;
}

// 通用样式
.commonFormItemStyle {
  & ::v-deep {
    // 去除输入框验证下边距
    .v-input .v-text-field__details {
      margin-bottom: 0px;
    }
  }
}
</style>

<style lang="scss" scoped>
// 左右布局时 表单子项样式
.UnshowDefaultLabel {
  ::v-deep {
    // textField 样式
    .v-text-field {
      .v-text-field__slot {
        label {
          display: none;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
// 左右布局时 表单子项样式
.insideFormItemStyle {
  ::v-deep {
    // textField 样式
    .v-text-field {
      .v-text-field__slot {
        label {
          text-align: left;
        }
      }
    }
  }
}
</style>
